<script setup name="singer-album">
import { onMounted, ref } from "vue"
import { artistAlbum } from '@/services/singer'
import { formatDate } from '@/utils/util'

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

const list = ref([])
const loading = ref(false)
const finished = ref(false)

// 获取歌手专辑
const loadData = async id => {
  loading.value = true
  const { hotAlbums } = await artistAlbum({ id, limit: 30, offset: list.value.length })
  list.value.push(...hotAlbums)
  loading.value = false
  if (hotAlbums.length === 0) finished.value = true
}

const onLoad = async () => await loadData(props.id)

onMounted(() => {
  onLoad()
})
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell :border="false" v-for="item in list" :key="item.id">
      <template #icon>
        <van-image :src="item.blurPicUrl" radius="10px" width="50" height="50" show-loading />
      </template>

      <template #title>
        <RouterLink :to="{ path: '/album', query: { id: item.id } }">
          <span class="name">{{ item.name }}</span>
        </RouterLink>
      </template>

      <template #label>
        {{ formatDate(item.publishTime) }} {{ item.size }}首
      </template>
    </van-cell>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  color: var(--reversal-text);
  opacity: .9;

  :deep(.van-cell__title) {
    padding-left: 10px;

    .name {
      font-size: 14px;
    }

  }

  :deep(.van-cell__label) {
    font-size: 10px;
  }
}
</style>